<template>
	<view class="page-content">
		<view class="bg">
			<view class="title"></view>
		</view>	
		<view class="content">
		  <view class="main" id="section6">
			  <view class="title" id="section7">
			  	<view class="icon"></view>
			  	<view class="test">无线基站退服</view>
			  </view>
			  <!-- tabs -->
			 <!-- <view class="tabs-padding" >
				  <view class="tabs-padding" >
				  	<u-subsection :list="tabsList" :current="activeTab" @change="tabClick" active-color="#fff" inactive-color="#A7ABBB" bg-color="#F1F6FF" button-color="#1B9CFF" font-size="26upx"></u-subsection>
				  </view>
			  </view> -->
			  	<!-- 退服 -->
			  	<view class="gzmx_subsection" v-if="activeTab == 0"  >
					<view class="gzmx_subsection_item" style="background-color: #F2F9FF;">
						<img class="gzmxView_nrItem_bomItemTf_img" src="@/static/images/pic_detail_guzhang1-3.png" alt="">
						<view class="gzmx_subsection_item_nr">
							<span style="color: #5F6475;">退服数：</span><span style="font-weight: 600;">{{wirelessData.Tf5G}}</span>个
						</view>
						<view class="gzmx_subsection_item_flex" style="background-color: #E2F1FD;">
							退服率：<span style="font-weight: 600;">{{wirelessData.Tf5GRate}}%</span>
						</view>
					</view>
					<view class="gzmx_subsection_item" style="background-color: #F6F6FF;">
						<img class="gzmxView_nrItem_bomItemTf_img" src="@/static/images/pic_detail_guzhang1-2.png" alt="">
						<view class="gzmx_subsection_item_nr">
							<span style="color: #5F6475;">退服数：</span><span style="font-weight: 600;">{{wirelessData.Tf4G}}</span>个
						</view>
						<view class="gzmx_subsection_item_flex" style="background-color: #E6E5FB;">
							退服率：<span style="font-weight: 600;">{{wirelessData.Tf4GRate}}%</span>
						</view>
					</view>
					<view class="gzmx_subsection_item">
						<img class="gzmxView_nrItem_bomItemTf_img" src="@/static/images/pic_detail_guzhang1-1.png" alt="">
						<view class="gzmx_subsection_item_nr">
							<span style="color: #5F6475;">退服数：</span><span style="font-weight: 600;">{{wirelessData.Tf2G}}</span>个
						</view>
						<view class="gzmx_subsection_item_flex">
							退服率：<span style="font-weight: 600;">{{wirelessData.Tf2GRate}}%</span>
						</view>
					</view>
					
			  	</view>
			  	<view class="gzmx_subsection" v-if="activeTab == 1"  >
			  		<view class="gzmx_subsection_item">
			  			<img class="gzmxView_nrItem_bomItemTf_img" src="@/static/images/pic_detail_guzhang1-3.png" alt="">
			  			<view class="gzmx_subsection_item_nr">
			  				<span style="color: #5F6475;">退服数：</span><span style="font-weight: 600;">{{tableDataWXW.Tf5GNum}}</span>个
			  			</view>
			  			<img class="gzmxView_nrItem_bomItemTf_icon" src="@/static/images/leiji1_3.png" alt="">
			  		</view>
					<view class="gzmx_subsection_item">
						<img class="gzmxView_nrItem_bomItemTf_img" src="@/static/images/pic_detail_guzhang1-2.png" alt="">
						<view class="gzmx_subsection_item_nr">
							<span style="color: #5F6475;">退服数：</span><span style="font-weight: 600;">{{tableDataWXW.Tf4GNum}}</span>个
						</view>
						<img class="gzmxView_nrItem_bomItemTf_icon" src="@/static/images/leiji1_3.png" alt="">
					</view>
					<view class="gzmx_subsection_item">
						<img class="gzmxView_nrItem_bomItemTf_img" src="@/static/images/pic_detail_guzhang1-1.png" alt="">
						<view class="gzmx_subsection_item_nr">
							<span style="color: #5F6475;">退服数：</span><span style="font-weight: 600;">{{tableDataWXW.Tf2GNum}}</span>个
						</view>
						<img class="gzmxView_nrItem_bomItemTf_icon" src="@/static/images/leiji1_1.png" alt="">
					</view>
					
			  	</view>
				<u-tabs :list="internetSpeedList" :current="current" :is-scroll="false" @change="tabsChange">
				</u-tabs>
			  	<!-- 地图 -->
			  	<!-- <view style="width:710rpx; height:460rpx; margin-top:20rpx ;">
			  	 	<view style="width:710rpx; height:500rpx">
			  	 		<l-echart ref="echartsmap"></l-echart>
			  	 	</view>
			  	 </view> -->
			  	 <!-- 退服数 -->
			  	 <view style="width:710rpx; height:460rpx">
			  	 	<l-echart ref="chartRef" style="width:710rpx; height:500rpx"></l-echart>
			  	 </view>
			  	 <view class="pic_fenge" id="section8"></view>
			  	 <view class="title">
			  	 	<view class="icon"></view>
			  	 	<view class="test">家宽</view>
			  	 </view>
			  	 <view class="user">
			  	 	<view class="item">
			  	 	    <view class="test1">
							<img class="test1_icon" src="@/static/images/jiakuan_icon.png" alt="">
							{{tableDataOLT.TfNum}}<span>起</span>
						</view>
					    <view class="test">OLT退服数</view>
			  	 	</view>
			  	 	<view class="item">
			  	 	   <view class="test1">	
						   <img class="test1_icon" src="@/static/images/jiakuan_icon.png" alt="">
						   {{tableDataOLT.TfRate}}<span>‰</span>
					   </view>
					    <view class="test">OLT退服率</view>
			  	 	</view>
					<view class="item">
					   <view class="test1">	
						   <img class="test1_icon" src="@/static/images/jiakuan_icon.png" alt="">
						   {{tableDataOLT.QzNum}}<span>起</span>
					   </view>
					    <view class="test">家宽群障数量</view>
					</view>
			  	 </view>
			  	 <!-- olt退服数 -->
			  	 <view style="width:710rpx; height:460rpx">
			  	 	<l-echart ref="chartRef1" style="width:710rpx; height:500rpx"></l-echart>
			  	 </view>		
				 <view class="pic_fenge"  id="section9"></view>
				 <view class="title">
				 	<view class="icon"></view>
				 	<view class="test">汇聚机房停电</view>
				 </view>
				 <view class="gzmxView_nrItem_bom">
				 	<view class="gzmxView_nrItem_bomItemTf">
				 		<view class="gzmxView_nrItem_bomItemTf_left"  style="width: 320rpx;">
				 			<view class="gzmxView_nrItem_bomItem_title"  @click="goToDetails(0)">
				 				停电数
				 			</view>
				 			<view class="gzmxView_nrItem_bomItem_nr"  @click="goToDetails(0)">
				 				<span style="font-size: 36rpx;">{{tableDataHJJF.TdNum}} </span> <span style="font-weight: 200;">个</span>
				 			</view>
				 			<view class="gzmxView_nrItem_bomItem_title" style="margin-top: 20rpx;"  @click="goToDetails(1)">
				 				超30分钟未发电数
				 			</view>
				 			<view class="gzmxView_nrItem_bomItem_nr"  @click="goToDetails(1)">
				 				<span style="font-size: 36rpx;">{{tableDataHJJF.WfdNum}} </span> <span style="font-weight: 200;">个 <span v-if="tableDataHJJF.WfdCounty != '无'">（{{tableDataHJJF.WfdCounty}}）</span></span>
				 			</view>
				 		</view>
				 		<view class="gzmxView_nrItem_bomItemTf_right" style="justify-content: center;">
				 			<l-echart ref="chartRef2" style="width:170rpx; height:170rpx"></l-echart>
				 			<view class="gzmxView_nrItem_bomItemTf_bomTit">
				 				未发电占比
				 			</view>
				 		</view>
				 	</view>
				 </view>
				 <view style="width:710rpx; height:460rpx">
				 	<l-echart ref="chartRef3" style="width:710rpx; height:500rpx"></l-echart>
				 </view>	
				 <view class="pic_fenge"  id="section10"></view>
				 <view class="title">
				 	<view class="icon"></view>
				 	<view class="test">动环监控健康度(自维)</view>
				 </view>
				 <view class="gzmxView_nrItem_bomDh"> 
					<view class="gzmxView_nrItem_bomItem" @click="goToZhuanqu(1)">
						<view class="gzmxView_nrItem_bomItem_top">
							<img class="dhIcon" src="@/static/images/dishi/img1.png" alt="">
							<span class="dhNum">{{dataQWGZQK.AlarmNum}}</span>
							<span class="danwei">个</span>
						</view>
						<view class="gzmxView_nrItem_bomItem_bom">
							未准确告警站点数
						</view>
					</view>
					<view class="gzmxView_nrItem_bomItem" @click="goToZhuanqu(2)">
						<view class="gzmxView_nrItem_bomItem_top">
							<img class="dhIcon" src="@/static/images/dishi/img2.png" alt="">
							<span class="dhNum">{{dataQWGZQK.RedNum}}</span>
							<span class="danwei">个</span>
						</view>
						<view class="gzmxView_nrItem_bomItem_bom">
							红色站点数
						</view>
					</view>
					<view class="gzmxView_nrItem_bomItem" @click="goToZhuanqu(3)">
						<view class="gzmxView_nrItem_bomItem_top">
							<img class="dhIcon" src="@/static/images/dishi/img3.png" alt="">
							<span class="dhNum">{{dataQWGZQK.NocollectNum}}</span>
							<span class="danwei">个</span>
						</view>
						<view class="gzmxView_nrItem_bomItem_bom">
							性能无采集值站点数
						</view>
					</view>
					<view class="gzmxView_nrItem_bomItem" @click="goToZhuanqu(4)">
						<view class="gzmxView_nrItem_bomItem_top">
							<img class="dhIcon" src="@/static/images/dishi/img4.png" alt="">
							<span class="dhNum">{{dataQWGZQK.PerforNum}}</span>
							<span class="danwei">个</span>
						</view>
						<view class="gzmxView_nrItem_bomItem_bom">
							性能数据异常站点数
						</view>
					</view>
				 </view>
				<!-- <view class="pic_fenge"  id="section9"></view>
				<view class="title">
					<view class="icon"></view>
					<view class="test">普通站点发电调度</view>
				 </view>
				 <view  id="table1" >
					<view class="tableTh">
						<span class="tableData_topTitle">区域</span>
						<span class="tableData_topTitle">停电数</span>
						<span class="tableData_topTitle">发电数</span>
						<span class="tableData_topTitle">未恢<br/>复数</span>
						<span class="tableData_topTitle">电压小于<br/>50V数</span>
						<span class="tableData_topTitle">停电<br/>比例</span>
						<span class="tableData_topTitle">停电<br/>退服比</span>
					</view>
					<view class="tableTd" :style="{height: isHig && dedicatedLineDataList.length > 3 ?  '450rpx' : '' }" >
						<view v-if="dedicatedLineDataList.length>0" :class="getRowClass(index)" v-for="(item, index) in dedicatedLineDataList" :key="index">
							<span class="tableData_bomTitle">{{ item.HappenTime }}</span>
							<span class="tableData_bomTitle">{{ item.Province }}</span>
							<span class="tableData_bomTitle">{{ item.County }}</span>
							<span class="tableData_bomTitle">{{ item.CustomerName }}</span>
							<span class="tableData_bomTitle">{{ item.OverTime }}</span>
							<span class="tableData_bomTitle">{{ item.CustomerName }}</span>
							<span class="tableData_bomTitle">{{ item.OverTime }}</span>
						</view>	
						<view class="tableTdNull" v-if="dedicatedLineDataList.length == 0">
							无
						</view>
					</view>
					<view class="gengduo" @click="onGD4()" v-if="isHig && dedicatedLineDataList.length > 3">
						展开更多 <img src="@/static/picture/icon_arrow_down.png" class="icon_arrow_down" alt="">
					</view>
				 </view> -->
		  </view>	
		</view>	
	</view>
</template>

<script module="echarts" lang="renderjs">
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	const jsonData = require('static/map/hubei.json');
	var myChart
	export default {
		watch: {
		    // 监听路由变化
		    '$route'(to, from) {
		      if (to.path === '/pagesJK/faultPage/index') {
		        	this.initPage()
					if(this.$route.query.to == 'section6'){
						this.activeTab = 0
					}else if(this.$route.query.to == 'section7'){
						this.activeTab = 1
					}
		      }    
		    }
		  },
		data() {
			return {
				dedicatedLineDataList: [],
				isHig: true,
				internetSpeedList:[{
					name: '5G'
				}, {
					name: '4G'
				},{
					name: '2G'
				}],
				OLTList:[{
					name: 'OLT退服数'
				}, {
					name: 'OLT退服率'
				}],
				current:0,
				current1:0,
			     // 割接时间
				tabsList: ['实时退服','值班期间累计退服'], 
	            returnCount:[], // 退服数
				returnAate:[], // 退服率
				list:[], //地图数据
				activeTab: 0,
				option: {
					tooltip: {
					    trigger: 'item',
					    textStyle: {
					        color: '#FFFFFF' // 字体颜色改为白色
					    },
					    backgroundColor: '#656565', // 背景颜色改为黑色
					    borderColor: '#656565', 
					    confine: true,
					    formatter: params => {
					        const { name } = params;
					        const filteredItems = this.list.filter(item => item.County === name);
					        if (filteredItems.length > 0) {
					            let str = ''; 
					            filteredItems[0].list.forEach((item, index) => {
					                str += `${item.name}:${item.value}个`;
					                if ((index + 1) % 2 === 0) {
					                    str += '\n';
					                } else {
					                    str += '    ';
					                }
					            });
					            return name + (str ? (': ' + '\n' + str) : '');
					        } else {
					            return name;
					        }
					    }
					},
					dataRange: {
						x: 'left',
						y: 'center',
						left:20,
						top:45,
						splitList: [],
						textStyle: {
						color: ['#49B0FF','#dfb311', '#F37A00', '#FF4D4D']
						},
						selectedMode: false,
						color: ['#49B0FF','#dfb311', '#F37A00', '#FF4D4D']
					},
					series: [{
						name: '数据',
						type: 'map',
						map: '湖北',
						left: 60,
						zoom: 1, // 设置初始缩放级别为1.2倍
						scaleLimit: {
							min: 0.5, // 最小缩放比例
							max: 2 // 最大缩放比例
						},
						selectedMode: false,
						itemStyle: {
							normal: {
								opacity: 0.8,
								borderWidth: 1,
								areaColor: '#1B9CFF',
								borderColor: '#fff',

								label: {
									show: true, //显示标签
									position: 'outside', //标签位置在区域内部
									textStyle: {
										color: '#000'
									},
								},
								emphasis: {
									areaColor: '#5095B3',
									borderColor: '#fff',
									opacity: 1,
									label: {
										show: true, //高亮显示标签
										position: 'inside', //高亮时标签位置也在区域内部
										textStyle: {
											color: '#fff'
										},
									}
								}
							}

						},
						visualMapIndex: 0,
						data: [],
					}]
				},
				option1: {
					tooltip: {
						trigger: 'item',
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						backgroundColor: '#656565', // 背景颜色改为黑色
						borderColor: '#656565', 
						confine: true,
						formatter: params =>{
							const { name } = params;
							const filteredItems = this.oltcityData.filter(item => item.County === name);
							const { TfNum = 0, TfRate = 0 } = filteredItems.length > 0 ? filteredItems[0] : {};
							return [
								name,
								 `OLT退服数: ${TfNum} 起`,
								 `OLT退服率: ${TfRate} %`
							].join('\n');
						}
					},
					visualMap: {
						min: 0,
						max: 20,
						show: false, // 隐藏 visualMap 组件
						// text: ['High', 'Low'],
						realtime: false,
						calculable: true,
						inRange: {
						  color: [ '#F37A00', '#FF4D4D']
						}
					  },
					series: [{
						name: '数据',
						type: 'map',
						map: '湖北',
						zoom: 1.2, // 设置初始缩放级别为1.2倍
						scaleLimit: {
							min: 0.5, // 最小缩放比例
							max: 2 // 最大缩放比例
						},
						selectedMode: false,
						itemStyle: {
							normal: {
								opacity: 0.8,
								borderWidth: 1,
								areaColor: '#1B9CFF',
								borderColor: '#fff',
				
								label: {
									show: true, //显示标签
									position: 'outside', //标签位置在区域内部
									textStyle: {
										color: '#000'
									},
								},
								emphasis: {
									areaColor: '#5095B3',
									borderColor: '#fff',
									opacity: 1,
									label: {
										show: true, //高亮显示标签
										position: 'inside', //高亮时标签位置也在区域内部
										textStyle: {
											color: '#fff'
										},
									}
								}
							}
						},
						visualMapIndex: 0,
						data: [],
					}]
				},
				tableDataWXW: {},
				wirelessData: {},
				dataQWGZQK: {},
				tableDataOLT: {},
				oltcityData: [],
				powerCityList: [],
				oltcountyDataName: [],
				oltcountyDataValue: [],
				oltcountyDataValue2: [],
				oltcountyDataValue3: [],
				powerCityListName: [],
				powerCityListValue: [],
				powerCityListValue2: [],
				powerCityListValue3: [],
				returnCountName: [],
				tableDataHJJF: [],
			}
		},
		mounted() {
			
			this.initPage()
			if(this.$route.query.to){
				this.$nextTick(() => {
					this.scrollToElement(this.$route.query.to)
				});
			}
		},
		methods: {
			// 滚动到页面的特定元素
			scrollToElement(to) {
			 if (to) {
					this.$nextTick(() => {
					   uni.createSelectorQuery().select('#' + to).boundingClientRect((rect) => {
						 if (rect) {
						   uni.pageScrollTo({
							 scrollTop: rect.top,
							 duration: 300
						   });
						 }
					   }).exec();
					});
			 }
			},
			initPage(){
				//全网故障情况
				this.getmalData()
				//无线实时退服
				this.getwirelessData()
				//无线实时退服（地市）
				this.getwxcityData('5G')
				//家宽OLT
				this.getoltData()
				//故障OLT退服（地图）
				this.getoltcityData()
				//汇聚机房
				this.getpowerfailData()
				//汇聚机房 (折线图)
				this.getpowerCityList()
			},
			//家宽OLT
			async getoltData() {
				this.tableData3 = null
				let	data = await this.$api.getoltData(); 
				// console.log('概览 - 家宽OLTres',data)
				if (data.Code == 200) {
					this.tableDataOLT = data.Data
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}		
			},
			//汇聚机房停电
			async getpowerfailData() {
				let	data = await this.$api.getpowerfailData(); 
				// console.log(' 汇聚机房停电',data)
				if (data.Code == 200) {
					this.tableDataHJJF = data.Data
					let list = []
					list.push(
						{value: Number(data.Data.WfdRate), name: '完成', itemStyle: {color: '#16CBAC'}} // 完成部分的颜色
					)
					list.push(
						{value: 100 - Number(data.Data.WfdRate), name: '未完成', itemStyle: {color: '#ccc'}} // 完成部分的颜色
					)
					this.$nextTick(() => {
						this.init2(list)
					});
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}		
			},
			//固定上网
			async init2(list){
				let option = {
					series: [
						{
							name: '完成度',
							type: 'pie',
							radius: ['50%', '90%'], // 环形图的内外半径
							avoidLabelOverlap: false,
							label: {
								show: false,
								position: 'outside' // 标签显示在外侧
							},
							labelLine: {
								show: false,
								length: 10,
								length2: 20
							},
							data: list
						}
					],
					 graphic: [{ // 中间的文本
						type: 'text',
						left: 'center',
						top: 'center',
						style: {
							text: this.tableDataHJJF.WfdRate + '%',
							textAlign: 'center',
							fill: '#000',
							fontSize: 12
						}
					}]
				};
				const chart = await this.$refs.chartRef2.init(echarts)
				chart.setOption(option)
			},
		
			//故障OLT退服（ 折线 ）
			async getoltcityData() {
				let	data = await this.$api.getoltcityData(); 
				// console.log('概览 - 故障OLT退服 地图数据',data)
				if (data.Code == 200) {
					this.oltcityData = data.Data
					let arr1 = []
					let arr2 = []
					let arr3 = []
					let arr4 = []
					data.Data.forEach(item => {
						
						arr1.push(item.County)
						arr2.push(item.TfNum)
						arr3.push(item.TfRate)
						arr4.push(item.QzNum)
					})
					this.oltcountyDataName = arr1
					this.oltcountyDataValue = arr2
					this.oltcountyDataValue2 = arr3
					this.oltcountyDataValue3 = arr4
					this.$nextTick(() => {
						this.init1()
					});
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}		
			},
			//汇聚机房停电（ 折线 ）
			async getpowerCityList() {
				let	data = await this.$api.getpowerCityList(); 
				// console.log('汇聚机房停电折线',data)
				if (data.Code == 200) {
					this.powerCityList = data.Data
					let arr1 = []
					let arr2 = []
					let arr3 = []
					let arr4 = []
					data.Data.forEach(item => {
						arr1.push(item.County)
						arr2.push(item.TdNum)
						arr3.push(item.WfdNum)
						arr4.push(item.WfaRate)
					})
					this.powerCityListName = arr1
					this.powerCityListValue = arr2
					this.powerCityListValue2 = arr3
					this.powerCityListValue3 = arr4
					this.$nextTick(() => {
					  this.init3()
					});
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}		
			},
			
			//累计实时退服（地市）
			async getwxallcityData(type) {
				let params = `?category=${type}`
				let	data = await this.$api.getwxallcityData(params); 
				// console.log('概览 - 累计实时退服（地市）res',data)
				if (data.Code == 200) {
					let arr = []
					let arr2 = []
					let arr3 = []
					data.Data.forEach(item => {
						arr.push(item.County)
						arr2.push(item.TfNum)
						arr3.push(item.TfRate)
					})
					let arr4 = []
					data.Data.forEach(item => {
						if(item.TfNum > 0){
							arr4.push({
								name: item.County,
								value: item.TfNum
							})
						}
					})
					this.returnCountName = arr
					this.returnCount = arr2
					this.returnAate = arr3
					this.init()
					// this.mYChartmap();
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}		
			},
			//无线实时退服（地市）
			async getwxcityData(type) {
				let params = `?category=${type}`
				let	data = await this.$api.getwxcityData(params); 
				// console.log('概览 - 无线实时退服地市res',data)
				if (data.Code == 200) {
					let arr = []
					let arr2 = []
					let arr3 = []
					data.Data.forEach(item => {
						arr.push(item.County)
						arr2.push(item.TfNum)
						arr3.push(item.TfRate)
					})
					let arr4 = []
					data.Data.forEach(item => {
						if(item.TfNum > 0){
							arr4.push({
								name: item.County,
								value: item.TfNum
							})
						}
						
					})
					this.arr2 = arr4  //地图颜色值处理
					this.returnCountName = arr
					this.returnCount = arr2
					this.returnAate = arr3
					this.init()
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}		
			},
			//无线实时退服 详情数据
			async getwirelessData() {
				let	data = await this.$api.getwirelessData(); 
				// console.log('概览 - 无线实时退服res',data)
				if (data.Code == 200) {
					this.wirelessData = data.Data
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}		
			},
			//故障-全网故障情况（全省）
			async getmalData() {
				let data = await this.$api.getmalCityData();
				// console.log('概览 - 重要事故 - 工单量 ',data)
				if (data.Code == 200) {
					this.dataQWGZQK = data.Data
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			//无线网
			async getwxData() {
				let	data = await this.$api.getwxData(); 
				// console.log('概览 - 无线网res',data)
				if (data.Code == 200) {
					this.tableDataWXW = data.Data
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}		
			},
			goToZhuanqu(type){
				this.$router.push({ 
					path:'/pagesJK/details/zhuanqu2',
					query:{ 
					   cityName: uni.getStorageSync('cityName'),
					   type: type,
					}
				});
			},
			tabsChange(index) {
				this.current = index;
				if(this.activeTab == 0){
					if(index == 0){
						this.getwxcityData('5G')
					}else if(index == 1){
						this.getwxcityData('4G')
					}else if(index == 2){
						this.getwxcityData('2G')
					}
				}
			
			},
			// 点击切割类型
			tabClick(index) {
				this.activeTab = index
				this.tabsChange(0)
			},
			// 渲染柱状图/折线图
			async init() {
				// 家宽流量
				let option = {
					grid: {
						top:'30rpx',
						left:'40rpx',
						right: '50rpx'
					},
					
					tooltip: {
			    		trigger: 'axis',
			    		confine: true, // 将tooltip框限制在图表的区域内
			    		textStyle: {
			    			color: '#FFFFFF' // 字体颜色改为白色
			    		},
			    		backgroundColor: '#656565', // 背景颜色改为黑色
			    		borderColor: '#656565', 
			    		formatter: (params) => {
			    				return params[0].name + '\n' + '退服数： ' + params[0].value +
			    					'\n' + '退服率： ' + params[1].value + '%';
			    		}
			    	},
					legend :{
						data: ['退服数', '退服率'],
						left: 'center',
						bottom: 0,
						 textStyle: {
							 color: '#A7ABBB' ,// 默认文本颜色
							 height: 8,
							   rich: {
								  a: {
									verticalAlign: 'middle',
								},
							}
						 },
						itemWidth: 10,  // 设置图例项的宽度
						itemHeight: 10 ,
					},
					xAxis: {
						axisLine: {
						    show: true,
						    lineStyle: {
						        type: 'dotted', // 点线
						        color: '#ccc', // 线条颜色
						        dashOffset: 0
						    }
						},
						axisTick: {
							show: false
						},
						type: 'category',
						data: this.returnCountName,
						axisLabel: {
							formatter: function(value) {
								return value.split('').join('\n');
							},
							interval:0,
							rotate: -30,
							fontSize: 10,
							margin: 20,    // 增加文字与柱子之间的间距，避免文字挡住柱子
							color: '#5C5C5C' // 设置标签颜色
						}
					},
					yAxis: [{
						// min: 0, //最小百分比
						// max: 100, //最大百分比
						// interval: 25, // 每 25% 画一条线
						axisLabel: {
							color: '#5C5C5C', // 设置标签颜色
							// formatter: function(value) {
							// 	return value + '%';
							// }
						},
						type: 'value',
						axisLine: {
							show: true, // 显示y轴
							lineStyle: {
							    type: 'dotted', // 点线
							    color: '#ccc', // 线条颜色
							    dashOffset: 0
							}
						},
						splitLine: {
							show: true,
							lineStyle: {
							    type: 'dotted', // 点线
							    color: '#ccc', // 线条颜色
							    dashOffset: 0
							}
						}
					},
					{
						 axisLabel: {
						 	color: '#5C5C5C', // 设置标签颜色
						 	formatter: function(value) {
						 		return value + '%';
						 	}
						 },
							type: 'value',
							// name: '退服率',
							position: 'right',
							alignTicks: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						}
					],
					series: [{
			    		data: this.returnCount,
			    		type: 'bar',
			    		name: '退服数',
						yAxisIndex:0,
			    		itemStyle: {
			    			color: '#0CB480',
			    			borderRadius: 4,
			    			borderWidth: 0
			    		},
			    		barWidth: 5
			    	}, {
			    		data: this.returnAate,
			    		name: '退服率',
						yAxisIndex:1,
			    		type: 'line',
			    		itemStyle: {
			    			color: '#0CB480'
			    		},
						smooth: true 
			    	}]
				}
				const chart = await this.$refs.chartRef.init(echarts);
				chart.setOption(option)
				chart.on('click', function(params) {
				}.bind(this));
			},
			async init1() {
				// 家宽流量
				let option = {
					grid: {
						top:'30rpx',
						left:'40rpx',
						right: '50rpx'
					},
					tooltip: {
			    		trigger: 'item',
			    		confine: true, // 将tooltip框限制在图表的区域内
			    		textStyle: {
			    			color: '#FFFFFF' // 字体颜色改为白色
			    		},
			    		backgroundColor: '#656565', // 背景颜色改为黑色
			    		borderColor: '#656565', 
			    		formatter: (params) => {
			    				return params.name + '\n' + 'OLT退服数： ' + this.oltcountyDataValue[params.dataIndex] + '起' +
			    					'\n' + 'OLT退服率： ' + this.oltcountyDataValue2[params.dataIndex] + '%'+
			    					'\n' + '家宽群障数： ' + this.oltcountyDataValue3[params.dataIndex] + '起';
			    		}
			    	},
					legend :{
							data: ['OLT退服数', 'OLT退服率', '家宽群障数'],
							left: 'center',
							 textStyle: {
							     color: '#A7ABBB' ,// 默认文本颜色
								 height: 8,
								   rich: {
								              a: {
								                verticalAlign: 'middle',
								    },
								}
							 },
							itemWidth: 10,  // 设置图例项的宽度
							itemHeight: 10 ,
						},
					xAxis: {
						axisLine: {
						    show: true,
						    lineStyle: {
						        type: 'dotted', // 点线
						        color: '#ccc', // 线条颜色
						        dashOffset: 0
						    }
						},
						axisTick: {
							show: false
						},
						type: 'category',
						data: this.oltcountyDataName,
						axisLabel: {
							formatter: function(value) {
								return value.split('').join('\n');
							},
							rotate: -30,
							margin: 20,    // 增加文字与柱子之间的间距，避免文字挡住柱子
							fontSize: 10,
							interval: 0, // 强制显示所有标签
							color: '#5C5C5C' // 设置标签颜色
						}
					},
					yAxis: [{
						// min: 0, //最小百分比
						// max: 100, //最大百分比
						// interval: 25, // 每 25% 画一条线
						axisLabel: {
							color: '#5C5C5C', // 设置标签颜色
						},
						type: 'value',
						axisLine: {
							show: true, // 显示y轴
							lineStyle: {
							    type: 'dotted', // 点线
							    color: '#ccc', // 线条颜色
							    dashOffset: 0
							}
						},
						splitLine: {
							show: true,
							lineStyle: {
							    type: 'dotted', // 点线
							    color: '#ccc', // 线条颜色
							    dashOffset: 0
							}
						}
					},
					{
						 // min: 0, //最小百分比
						 // max: 100, //最大百分比
						 // interval: 25, // 每 25% 画一条线
						 axisLabel: {
							color: '#5C5C5C', // 设置标签颜色
							formatter: function(value) {
								return value + '%';
							}
						 },
						   type: 'value',
						   // name: '退服率',
						   position: 'right',
						   alignTicks: true,
						   lineStyle: {
							   type: 'dotted', // 点线
							   color: '#ccc', // 线条颜色
							   dashOffset: 0
						   }
					   }
					],
					series: [{
			    		data: this.oltcountyDataValue,
			    		type: 'bar',
			    		name: 'OLT退服数',
						yAxisIndex:0,
			    		itemStyle: {
			    			color: '#0CB480',
			    			borderRadius: 4,
			    			borderWidth: 0
			    		},
			    		barWidth: 5
			    	}, {
			    		data: this.oltcountyDataValue2,
			    		name: 'OLT退服率',
			    		type: 'line',
						yAxisIndex:1,
			    		itemStyle: {
			    			color: '#0CB480'
			    		},
						smooth: true 
			    	},{
			    		data: this.oltcountyDataValue3,
			    		type: 'bar',
			    		name: '家宽群障数',
						yAxisIndex:0,
			    		itemStyle: {
			    			color: '#5AC8FB',
			    			borderRadius: 4,
			    			borderWidth: 0
			    		},
			    		barWidth: 5
			    	}]
				}
				const chart = await this.$refs.chartRef1.init(echarts);
				chart.setOption(option)
			},
			goToDetails(nav){
				this.$router.push({ 
					path:'/pagesJK/faultPage/components/Tab1Details1',
					query:{ 
					   cityName: uni.getStorageSync('cityName'),
					   type: 3,
					   navType: nav
					}
				});
			},
			async init3() {
				// 汇聚机房停电
				let option = {
					grid: {
						top:'30rpx',
						left:'40rpx',
						right: '50rpx'
					},
					// tooltip: {
			  //   		trigger: 'axis',
			  //   		confine: true, // 将tooltip框限制在图表的区域内
			  //   		textStyle: {
			  //   			color: '#FFFFFF' // 字体颜色改为白色
			  //   		},
			  //   		backgroundColor: '#656565', // 背景颜色改为黑色
			  //   		borderColor: '#656565', 
			  //   		formatter: (params) => {
					// 		// console.log('params',params)
			  //   				return params[0].name + '\n' + '停电数： ' + params[0].value + '个' +
			  //   					'\n' + '超30分钟未发电数： ' + params[1].value + '个'+
			  //   					'\n' + '未发电占比： ' + params[2].value + '%';
			  //   		}
			  //   	},
					legend :{
							data: ['停电数', '超30分钟未发电数', '未发电占比'],
							left: 'center',
							 textStyle: {
							     color: '#A7ABBB' ,// 默认文本颜色
								 height: 8,
								   rich: {
								              a: {
								                verticalAlign: 'middle',
								    },
								}
							 },
							itemWidth: 10,  // 设置图例项的宽度
							itemHeight: 10 ,
						},
					xAxis: {
						axisLine: {
						    show: true,
						    lineStyle: {
						        type: 'dotted', // 点线
						        color: '#ccc', // 线条颜色
						        dashOffset: 0
						    }
						},
						axisTick: {
							show: false
						},
						type: 'category',
						data: this.powerCityListName,
						axisLabel: {
							formatter: function(value) {
								return value.split('').join('\n');
							},
							rotate: -30,
							margin: 20,    // 增加文字与柱子之间的间距，避免文字挡住柱子
							fontSize: 10,
							interval: 0, // 强制显示所有标签
							color: '#5C5C5C' // 设置标签颜色
						}
					},
					yAxis: [{
						// min: 0, //最小百分比
						// max: 100, //最大百分比
						// interval: 25, // 每 25% 画一条线
						axisLabel: {
							color: '#5C5C5C', // 设置标签颜色
						},
						type: 'value',
						axisLine: {
							show: true, // 显示y轴
							lineStyle: {
							    type: 'dotted', // 点线
							    color: '#ccc', // 线条颜色
							    dashOffset: 0
							}
						},
						splitLine: {
							show: true,
							lineStyle: {
							    type: 'dotted', // 点线
							    color: '#ccc', // 线条颜色
							    dashOffset: 0
							}
						}
					},
					{
						 // min: 0, //最小百分比
						 // max: 100, //最大百分比
						 // interval: 25, // 每 25% 画一条线
						 axisLabel: {
							color: '#5C5C5C', // 设置标签颜色
							formatter: function(value) {
								return value + '%';
							}
						 },
						   type: 'value',
						   // name: '退服率',
						   position: 'right',
						   alignTicks: true,
						   lineStyle: {
							   type: 'dotted', // 点线
							   color: '#ccc', // 线条颜色
							   dashOffset: 0
						   }
					   }
					],
					series: [{
			    		data: this.powerCityListValue,
			    		type: 'bar',
			    		name: '停电数',
						yAxisIndex:0,
			    		itemStyle: {
			    			color: '#16CBAC',
			    			borderRadius: 4,
			    			borderWidth: 0
			    		},
			    		barWidth: 5
			    	}, {
			    		data: this.powerCityListValue2,
			    		name: '超30分钟未发电数',
			    		type: 'bar',
						yAxisIndex:0,
			    		itemStyle: {
			    			color: '#D2BA5B',
			    			borderRadius: 4,
			    			borderWidth: 0
			    		},
						barWidth: 5
						
			    	},{
			    		data: this.powerCityListValue3,
			    		type: 'line',
			    		name: '未发电占比',
						yAxisIndex:1,	
			    		itemStyle: {
			    			color: '#16CBAC'
			    		},
			    		smooth: true 
			    	}]
				}
				const chart = await this.$refs.chartRef3.init(echarts);
				chart.setOption(option)
				let that = this
				// 添加点击事件监听器
				chart.on('click', function(params) {
					// console.log('点击事件监听器',params)
					let name = params.name; // 获取点击区域的名称
					that.$router.push({
						path:'/pagesJK/faultPage/components/Tab1Details2',
						query:{ 
						   cityName: uni.getStorageSync('cityName'),
						   districtName: name,
						   type: 3,
						   navType: 0
						}
					});
				});
			}
		}
	}
</script>
  
<style lang="scss" scoped>
	.bg {
		width: 100%;
		height: 370rpx;
		background-color: #fff;
	 	background: url(@/static/fault/banner_guzhang_new.png) no-repeat center;
		background-size: contain;
		position: relative;
		top: 80rpx;
	
		.title {
			width: 398rpx;
			height: 110rpx;
			background: url(@/static/fault/pic_title_guzhang3.png) no-repeat center;
			background-size: contain;
			position: absolute;
			left: 14rpx;
			bottom: 74rpx;
			color: #ffffff;
			font-size: 36rpx;
			font-weight: 700;
			padding: 21rpx 0 0 85rpx;
		}
	}
	.content {
		width: 750rpx;
		// height: 485rpx;
		padding: 40rpx 20rpx;
		background-color: #cce7ff;
		position: relative;
		top: 80rpx;
		
		.main {
			width: 710rpx;
			background-color: #ffffff;
			border-radius: 16rpx;
			margin-top: -134rpx;
			padding-bottom: 50rpx;
			.title {
				padding-left: 40rpx;
				padding-top: 37rpx;
				display: flex;
				text-align: center;
			    .icon {
				  width: 10rpx;
				  height: 40rpx;
				  margin-right: 20rpx;
				  background: #1B9CFF;
				  border-radius: 5rpx 5rpx 5rpx 5rpx;
				}
				.test {
					font-size: 32rpx;
					color:#363636;
				}
			}
			.tabs-padding{
				padding: 30rpx 19rpx 0rpx 19rpx;
				width: 100%;
				.tabsList {
					width: 100%;
					height: 60rpx;
					background-color: #F1F6FF;
					border-radius: 60rpx;
					display: flex;
				
					.listItem {
						width: 50%;
						height: 60rpx;
						border-radius: 60rpx;
						text-align: center;
						line-height: 60rpx;
						font-size: 26rpx;
						color: #A7ABBB;
						transition: background-color 0.3s ease, color 0.5s ease;
					}
				
					.is-active {
						background-color: #1B9CFF;
						color: #fff;
					}
				}
			}
			.gzmx_subsection{
				margin-top: 4rpx;
				.gzmx_subsection_item{
					display: flex;
					align-items: center;
					align-items: center;
					width: 630rpx;
					height: 109rpx;
					background: #F6FCFA;
					border-radius: 16rpx;
					border: 1rpx solid #DBDEE8;
					margin: 0 auto;
					margin-top: 20rpx;
					position: relative;
					.gzmxView_nrItem_bomItemTf_img{
						width: 60rpx;
						height: 60rpx;
						margin-left: 30rpx;
						margin-right: 12rpx;
					}
					.gzmx_subsection_item_nr{
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #000;
					}
					.gzmx_subsection_item_flex{
						width: 229rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						background: #DEF4EE;
						border-radius: 0 16rpx 0rpx 24rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #000000;
						position: absolute;
						top: 0;
						right: 0;
					}
					.gzmxView_nrItem_bomItemTf_icon{
						width: 112rpx;
						height: 112rpx;
						margin-left: auto;
						margin-right: 24rpx;
					}
				}
			}
		
			.dashed{
				padding: 0 64rpx;
				margin-bottom: 30rpx;
				margin-top: 45rpx;
				.dashed-button{
					border-bottom: 1rpx #C6C6C6 dashed;
				}
				 
			}
			.u-tabs{
				padding: 0 180rpx;
			}
			.pic_fenge {
				height: 50rpx;
				margin-top: 50rpx;
				background: url(@/static/picture/cuttingPage/pic_fenge.png) no-repeat center;
				background-size: 100%;
			}
			#table1{
				width: 650rpx;
				border-radius: 20upx 20upx 0 0;
				overflow: hidden;
				position: relative;
				margin: 20rpx auto;
				background-color: #fff;
				
			}
			/deep/ .u-item-bg,.u-subsection{
				border-radius: 30upx !important;
			}
			
			.tableTh{
				height: 103rpx;
				background: #F2F5F8;
				box-shadow: inset 0rpx 10rpx 6rpx 1rpx rgba(108,148,182,0.2);
				border: 1rpx solid #A4B8D3;
				border-radius: 20upx 20upx 0 0;
				display: flex;
				align-items: center;
				overflow: hidden;
				position: absolute;
				top: 0;
				.tableData_topTitle{
					width: 94rpx;
					text-align: center;
					display: block;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24upx;
					color: #2654B0;
				}
			}
			.tableTd{
					padding: 80upx 0 0;
					overflow: hidden;
					.tableTr{
						padding: 10upx;
						display: flex;
						align-items: center;
						border-radius: 8rpx;
					}
					.tableData_bomTitle{
						width: 80upx;
						text-align: center;
						height: 100%;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24upx;
						color: #5F6475;
						line-height: 24px;
						display: block;
						font-style: normal;
						text-transform: none;
						padding: 5upx;
					}
				}
			.gengduo{
				width: 709upx;
				height: 60upx;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #F1F6FF;
				position: absolute;
				bottom: 0;
				left: 0;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24upx;
				color: #2654B0;
				.icon_arrow_down{
					width: 24upx;
					height: 12upx;
					margin-left: 13upx;
				}
			}
			.tableTdNull{
				width: 100%;
				text-align: center;
				margin: 40rpx auto 0;
				font-size: 28rpx;
				color: #5F6475;
			}
			.user {
				width: 100%;
				display: flex;
				justify-content: space-between;
				padding: 0 50rpx;
				margin: 20rpx auto 42rpx;
				.item{
					 width: 193rpx;
					 height: 135rpx;
					 background: #F9F9F9;
					 border: 1rpx solid #DBDEE8;
					 padding-top: 20rpx;
					 border-radius: 16rpx;
					.test{
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #A7ABBB;
						text-align: center;
						margin-top: 12rpx;
					}
					.test1{
						display: flex;
						align-items: center;
						justify-content: center;
						height: 52rpx;
						font-size: 36rpx;
						color: #000000;
						font-weight: 700;
						.test1_icon{
							width: 46rpx;
							height: 46rpx;
							margin-right: 10rpx;
						}
						span {
							height: 24rpx;
							font-size: 24rpx;
							font-weight: 100;
							margin-left: 9rpx;
						}
					}
				}
			}
			.user1 {
				width: 100%;
				height: 92rpx;
				display: flex;
				justify-content: space-between;
				padding: 0 78rpx 0 78rpx;
				margin-top: 20rpx;
				.item{
					.test{
						// width: 150rpx;
						height: 40rpx;
						font-size: 28rpx;
						color: #5F6475;
						margin-bottom: 15rpx;
					}
					.test1{
						
						display: flex;
						justify-content: center;
						align-items: center;
						.font{
							font-size: 36rpx;
							color: #000000;
							font-weight: 700;
						}
						.font1 {
							font-size: 24rpx;
							font-weight: 100;
							margin-left: 7rpx;
							padding-top: 5rpx;
						}
					}
					
				}
			}
		}
		.gzmxView_nrItem_bom{
			margin-bottom: 60rpx;
		}
		.gzmxView_nrItem_bomDh{
			width: 606rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin: 30rpx auto;
			.gzmxView_nrItem_bomItem{
				width: 293rpx;
				height: 124rpx;
				background: #F9F9F9;
				border-radius: 16rpx;
				border: 1px solid #DBDEE8;
				margin-bottom: 20rpx;
				.gzmxView_nrItem_bomItem_top{
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: 18rpx;
					.dhIcon{
						width: 46rpx;
						height: 46rpx;
					}
					.dhNum{
						font-family: DIN, DIN;
						font-weight: bold;
						font-size: 36rpx;
						margin: 0 8rpx;
					}
					.danwei{
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #A7ABBB;
					}
				}
				.gzmxView_nrItem_bomItem_bom{
					width: 100%;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #A7ABBB;
					text-align: center;
					font-style: normal;
					text-transform: none;
					margin-top: 10rpx;
				}
			}
		}
		.gzmxView_nrItem_bomItemTf{
			width: 580rpx;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.gzmxView_nrItem_bomItemTf_left{
				margin-top: 10rpx;
				margin-left: 20rpx;
				.gzmxView_nrItem_bomItem_title{
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #A7ABBB;
					margin-top: 10rpx;
				}
				.gzmxView_nrItem_bomItem_nr{
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 24rpx;
					color: #000000;
					margin-top: 5rpx;
				}
			}
			.gzmxView_nrItem_bomItemTf_right{
				width: 216rpx;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				.gzmxView_nrItem_bomItemTf_img{
					width: 166rpx;
					height: 154rpx;
				}
				.gzmxView_nrItem_bomItemTf_bomTit{
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #A7ABBB;
				}
			}
			
		}
		/deep/ .u-item-bg,.u-subsection{
			border-radius: 30upx !important;
		}
	}
</style>